<template>

  <el-main style="background-color:#fafafa">
    <h1> {{blogInfo.blogTitle}}</h1>
    <p> {{blogInfo.blogCreateTime | dateYMDHMSFormat }}</p>

    <el-row type="flex" justify="center" style="z-index: 1">
      <el-col :span="20" :xs="24">
        <mavon-editor
            ref="md"
            v-model="blogInfo.blogContent"
            :editable="false"
            default-open="preview"
            :ishljs="true"
            :toolbarsFlag="false"
            :html="true"
            :subfield="false"
            :xssOptions="{
                whiteList: {
                    iframe: ['src', 'height', 'width', 'scrolling','allowfullscreen','frameborder'],
                    div: ['style', 'height', 'width', 'align'],
                    img: ['src', 'height', 'width','style', 'align']
                  }
              }"
        />
        <!--  仅用作展示可以设置props:
        toolbarsFlag: false ,
        subfield: false,
        defaultOpen: "preview"-->
      </el-col>
    </el-row>


    <p></p>

    <el-row type="flex" justify="center" style="z-index: 1">
      <el-col :span="15" :xs="24">
        <el-card class="box-card"  v-if="commentList!=null">
          <h3> 相关 article</h3>


        </el-card>
      </el-col>

    </el-row>


    <p></p>



    <el-row type="flex" justify="center" style="z-index: 1">
      <el-col :span="15" :xs="24">
        <el-card class="box-card"  v-if="commentList!=null">
        <h3> Comment List</h3>
          <div class="card-body"  v-for="item in commentList" :key="item.blogId" >
            <p class="display-6">
              <el-avatar size="large" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              A funny Human |
              <span class="date">{{ item.CommentTime | dateYMDHMSFormat}}</span>
            </p>

            <div>
              <p v-html="item.blogCommentContent">
              </p>
            </div>

          </div>
        </el-card>

        <el-card>


          <h3> Comment 有问题请评论！</h3>



          <el-form :inline="true" >
            <el-form-item >
              <el-row>
              <el-input v-model="comment.blogCommentContent" auto-complete="false" placeholder="请输入评论内容"></el-input>
              </el-row>
            </el-form-item>
            <el-button type="success" @click="submitComment"> 提交 </el-button>
          </el-form>
        </el-card>


      </el-col>

    </el-row>



  </el-main>
</template>

<script>
import {blogGet} from "@/api/blog";
import {commentSave} from "@/api/comment";

export default {
  name: "blog",
  data() {
    return {
      comment: {
        blogCommentBlogId: this.$route.params.blogId,
        blogCommentContent: ''
      },
      blogInfo : {
        blogContent: '',
        blogCreateTime: '',
        blogId: '',
        blogIntro: '',
        blogLike: '',
        blogTag: '',
        blogTitle: '',
        blogViews: ''
      },
      commentList: ''
    }
  },
  created() {
    this.getThisBlog(this.$route.params.blogId)
  },
  methods: {
    getThisBlog(blogId){
      blogGet(blogId).then(
        res => {
          this.commentList = res.comment;
          this.blogInfo = res.data;
        }
      )
    },
    submitComment(){

      commentSave(this.comment).then(
          res=> {
            console.log(res)
          }
      )

    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  text-align: left;
}
</style>
